<template>
  <div class="approve-step-item">
    <div class="df-center">
      <div class="flex1 df-center mb10 title">
        <img
          class="approve-step-item__avatar mr10"
          :src="item.headImg || defaultAvatar"
          alt=""
        />
        <span class="mr10 fc6">{{ item.realName }}</span>
        <span class="fc9">{{ item.roleName }}</span>
      </div>
      <span class="time fc9">{{ isCancel?item.createTime:item.updateTime }}</span>
    </div>
    <div class="df-center mb10">
      <div class="mr10 level-node-content">
        {{ `${levelNode}级审批` }}
      </div>
      <TagType :value="item.status||item.nodeType" :map="colorMap"></TagType>
      <div class="editRemark">{{ item.editRemark }}</div>
    </div>
    <div>意见：{{ item.remark || "--" }}</div>
  </div>
</template>

<script>
import TagType from '@/components/TagType'
import defaultAvatar from '@/assets/default-logo.jpg'
const colorMap = {
  '0': { color: '#409EFF', msg: '待审批' },
  '1': { color: '#009688', msg: '审批通过' },
  '2': { color: '#E6A23C', msg: '自动通过' },
  '3': { color: '#F56C6C', msg: '审批驳回' },
  '4': { color: '#F7AD60', msg: '撤销审批' },
  '5': { color: '#F7AD60', msg: '驳回审批' }
}
export default {
  name: 'StepItem',
  components: { TagType },
  props: {
    item: {
      type: Object,
      default () {
        return {}
      }
    },
    levelNode: {
      type: [String, Number],
      default: '0'
    },
    // 是否为撤销
    isCancel: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      defaultAvatar,
      colorMap
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {}
}
</script>

<style scoped lang="scss">
.approve-step {
  &-item {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dedede;
    margin-bottom: 10px;
    // max-width: 500px;

    &__avatar {
      display: inline-block;
      width: 30px;
      height: 30px;
    }
  }
}
</style>
<style lang="scss">
// .el-step__description.is-success {
//   color: inherit;
//   .approve-step-item {
//     border-color: #67c23a;
//     .title {
//       color: #67c23a;
//     }
//   }
// }
</style>
